<!--  -->
<template>
	<div class="lsh-student-box">
		<div class="lsh-btn-list">
			<div
				:class="{
					'lsh-btn-item': true,
					active: item.value === activeFilter
				}"
				v-for="(item, index) in tabs"
				:key="item.label"
				@click="activeFilter = item.value"
			>
				{{ item.label }}
			</div>
		</div>
		<div class="lsh-student-list" v-show="filterList.length !== 0">
			<div
				:class="{
					'lsh-student-item': true,
					active: info?.userId === item.id
				}"
				v-for="item in filterList"
				:key="item.id"
				@click="hanSelect(item)"
			>
				<a-avatar :size="28">
					<img alt="avatar" :src="item.avatar" />
				</a-avatar>
				<span class="lsh-student-name">{{ item.name }}</span>
				<a-tag
					:class="['lsh-student-tag', TagTypeEnum.error]"
					v-if="item.cannot"
					>不会</a-tag
				>
				<a-tag
					:class="[
						'lsh-student-tag',
						item.tag === '优秀作答' ? TagTypeEnum.correct : TagTypeEnum.error
					]"
					v-if="item.tag !== ''"
					>{{ item.tag }}</a-tag
				>
				<span class="lsh-student-answer">{{ item.answer }}</span>
				<span class="lsh-student-score">{{ item.score }}</span>
			</div>
		</div>
		<Empty
			class="lsh-draw-empty"
			:imgSrc="EmptyImg"
			v-show="filterList.length === 0"
		>
			<template #description>
				<div class="lsh-empty-desc">暂无数据</div>
			</template>
		</Empty>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TagTypeEnum } from '@/constants'
import Empty from '@/components/_shared/components/empty/index.vue'
import EmptyImg from '@/assets/images/empty.png'
import { ClassifyData, StudentAnswerInfo } from '@/api/bigScreenTopic/type'
const props = withDefaults(
	defineProps<{
		info: {
			classifyData: ClassifyData
			userId?: string
		}
	}>(),
	{
		info: () => {
			return {
				classifyData: {},
				userId: ''
			}
		}
	}
)
const emits = defineEmits(['select'])
const activeFilter = ref('all')
const tabs = computed(() => {
	const options = Object.entries(props.info.classifyData)
		.map(([key]) => {
			return {
				label: key,
				value: key
			}
		})
		.filter((i) => i.value !== '未提交')
	activeFilter.value = 'all'
	return [
		{
			label: '全部',
			value: 'all'
		},
		...(options || [])
	]
})
const filterList = computed(() => {
	let list: StudentAnswerInfo[] = []
	if (activeFilter.value === 'all') {
		list = Object.entries(props.info.classifyData)
			.map(([k, v]) => {
				return v.map((item) => {
					return {
						...item,
						key: k
					}
				})
			})
			.flat()
	} else {
		list = props.info.classifyData[activeFilter.value] ?? []
	}
	if (list.length === 0) return []
	return list.map((item) => {
		const markItem = item.markItem || []
		const answerItem = item.answerItem || []
		const isParent = item.markItem?.length > 1
		// '11': '单选题',
		// '12': '多选题',
		const showAnswer =
			!isParent && ['11', '12'].includes(answerItem[0]?.quesStruct)
		const answer = showAnswer ? answerItem[0]?.value.join('') : ''
		const tag = isParent ? '' : (markItem[0]?.markTopicId?.[0] ?? '')
		const scoreText =
			item?.key === '未提交'
				? '未提交'
				: item.myScore === null
					? '未批阅'
					: `${item.myScore}分`
		return {
			id: item.uid,
			name: item.uname,
			avatar: item.avatarUrl,
			score: scoreText,
			tag: tag,
			cannot: answerItem[0]?.cannot,
			answer: activeFilter.value === answer ? '' : answer
		}
	})
})
const hanSelect = (item: Record<string, any>) => {
	emits('select', item)
}
</script>
<style scoped lang="less">
@padding-v: 16px;
.lsh-student-box {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	width: 100%;
	.lsh-btn-list {
		display: flex;
		gap: 4px;
		padding: 12px @padding-v;
		overflow: auto;
		flex-shrink: 0;
		.lsh-btn-item {
			padding: 6px 8px;
			border-radius: 8px;
			border: 1px solid #e1e5eb;
			background: #fff;
			display: flex;
			height: 32px;
			min-width: 42px;
			justify-content: center;
			align-items: center;
			color: #474f59;
			font-size: 14px;
			font-weight: 400;
			line-height: 1;
			cursor: pointer;
			user-select: none;
			text-wrap: nowrap;
			&.active {
				border-color: #0065ff;
				color: #0065ff;
				font-weight: 600;
			}
		}
	}
	.lsh-student-list {
		display: flex;
		flex-direction: column;
		overflow: auto;
		width: 100%;

		.lsh-student-item {
			padding: 12px @padding-v;
			display: flex;
			align-items: center;
			cursor: pointer;
			&.active {
				background: rgba(0, 101, 255, 0.08);
			}
			&:not(:last-child) {
				border-bottom: 1px solid #f2f5fa;
			}
			.lsh-student-name {
				margin-left: 8px;
			}
			.lsh-student-score {
				width: 42px;
				// margin-left: auto;
				text-align: end;
			}
			.lsh-student-answer {
				padding: 0 16px;
				margin-left: auto;
				width: 78px;
			}
			.lsh-student-tag {
				margin-left: 4px;
				padding: 0 4px;
			}
		}
	}
	.lsh-draw-empty {
		flex: 1;
	}
}
</style>
